import React, { ForwardedRef, useEffect, useRef, useState } from 'react'
import style from './style.module.scss'
import NavbarLayout from '../__Layout__/NavbarLayout'
import { Image } from 'antd'
import {
    CreditCardOutlined,
    HeartOutlined,
    HomeOutlined,
    MessageOutlined,
    RightOutlined,
    ShoppingOutlined,
    TrademarkCircleOutlined
} from '@ant-design/icons'
import GoodsRequester from '../../transfer/entities/Goods'
import LeoButton from '../../widgets/LeoButton'
import Formatter from '../../utils/Formatter'
import LeoModal from '../../widgets/LeoModal'
import SpecSelector from './SpecSelector'
import SkuProcessor from '../../utils/SkuProcessor'
import { useRecoilState } from 'recoil'
import { GiftList } from '../__Layout__/NavbarLayout/Navbar/Gift/state'
import Configuration from '../../config/Config.Dev'
import EventBus from '../../utils/EventBus'

export default function Goods(props: any) {
    const [giftList, setGiftList] = useRecoilState(GiftList)
    const [goods, setGoods] = useState<any>()
    // 商品属性列表
    const [specs, setSpecs] = useState<any>()
    // 商品属性英文标识（从商品属性列表中获取对应属性名和可选值）
    const [specsType, setSpecType] = useState<string[]>()
    // 当前选择的spec信息
    const [selectedSpec, setSelectedSpec] = useState<Array<string | undefined>>([])
    // 处理后的sku信息
    const [processedSku, setProcessedSku] = useState<any>({})
    // 计算后的sku
    const [selectedSku, setSelectedSku] = useState<any>()

    const handleSpecSelectorSelected = (index: number, value: string | undefined, component: any) => {
        let spec: Array<string | undefined> = [...selectedSpec]
        if (index === 0) {
            // 如果是第一个选项
            // 设置第一个选择项，其他的置空
            setSelectedSku(processedSku[value!])
            spec = [value]
            component.close()
        } else {
            if (selectedSku[value!]) {
                setSelectedSku(selectedSku[value!])
                spec[index] = value
                component.close()
            }
        }

        setSelectedSpec(spec)
    }

    const initializeGoodsDetails = async () => {
        const goods = await new GoodsRequester().getGoodsDetails(props.params.goodsId)
        if (goods.code === 200) {
            setGoods(goods.data)
            // 处理sku
            const processor = new SkuProcessor(goods.data.skus)

            // 保存处理后的数据
            setSpecs(processor.getSpecs())
            setSpecType(processor.getSpecTypes())
            setProcessedSku(processor.getProcessedSku())
        }
    }

    const calcPrice = () => {
        if (!selectedSku || !selectedSku.price) {
            return '价格待计算'
        }
        return Formatter.toThousands(selectedSku.price)
    }

    useEffect(() => {
        initializeGoodsDetails()
    }, [])

    return (
        <NavbarLayout>
            <div className={style.goods__container}>
                <div className={style.goods__previews__container}>
                    <div className={style.goods__previews__head}>
                        <Image src={`${Configuration.IMAGE_URL_PREFIX}${goods?.shows[0]}`} />
                    </div>
                    <ul className={style.goods__previews__show_list}>
                        {goods?.shows.slice(1).map((show: string, index: number) => (
                            <li key={index}>
                                <Image src={`${Configuration.IMAGE_URL_PREFIX}${show}`} />
                            </li>
                        ))}
                    </ul>
                </div>
                <div className={style.goods__details__container}>
                    <div className={style.goods__details__wrap}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <p className={style.title}>{goods?.id}</p>
                            <HeartOutlined />
                        </div>
                        <h1>{goods?.title}</h1>
                        <ul className={style.goods__details__skus__list}>
                            {specsType?.map((specType, index) => {
                                const spec = specs![specType]
                                let comRef: any
                                return (
                                    <React.Fragment key={index}>
                                        <li
                                            key={`li-${index}`}
                                            onClick={() => {
                                                comRef.open()
                                            }}>
                                            <h5 className={style.title}>{spec.name}</h5>
                                            <i>{selectedSpec[index] ?? '请选择'}</i>
                                            <RightOutlined />
                                        </li>
                                        <SpecSelector
                                            deep={index}
                                            ref={component => {
                                                comRef = component
                                            }}
                                            key={`selector-${index}`}
                                            title={spec.name}
                                            values={spec.values}
                                            selected={selectedSpec}
                                            onSelect={(index, value) =>
                                                handleSpecSelectorSelected(index, value, comRef)
                                            }
                                            sku={processedSku}
                                        />
                                    </React.Fragment>
                                )
                            })}
                        </ul>
                        <h2>{calcPrice()}</h2>
                        <div>
                            <LeoButton
                                title="放进礼品袋"
                                to="#"
                                isInvert
                                className={style.btn__add__gift}
                                onClick={() => {
                                    const items = [...giftList.data]
                                    items.push({
                                        goodsTitle: goods?.title,
                                        goodsId: props.params.goodsId,
                                        goodsImage: goods?.shows[0],
                                        sku: selectedSku,
                                        num: 1
                                    })
                                    setGiftList({
                                        ...giftList,
                                        data: items
                                    })
                                    EventBus.publish('onGiftListItemAdded')
                                }}
                            />
                        </div>
                        <div style={{ fontSize: '.4rem', margin: '40px 0' }}>
                            <p>{goods?.description}</p>
                        </div>
                        <div className={style.goods__details__list__wrap}>
                            <p>详细特征</p>
                            <ul>
                                {goods?.details.map((detail: string, index: number) => (
                                    <li key={index}>{detail}</li>
                                ))}
                            </ul>
                        </div>
                        <ul className={style.goods__modal__list}>
                            <li
                                onClick={() => {
                                    LeoModal.show({
                                        title: '支付方式',
                                        children: (
                                            <p>
                                                在向您发运产品前，您必须通过支付宝、微信支付或银行转账（前提是您应是付款银行账户、微信账户、支付宝账户的合法持有人并且您定居在中国大陆地区）或在本网站上不时可用的其他付款方式进行支付。付款金额必须为人民币。如果您通过银行转
                                                账付款，我们将通过电子邮件或短信将路易威登的银行账户详细信息发送给您。银行账户、微信账户或支付宝账户持有人的姓名必须与下单人员的姓名相符。此外，不接受国际银行转账和现金转账。
                                            </p>
                                        )
                                    })
                                }}>
                                <CreditCardOutlined style={{ marginRight: '20px' }} />
                                支付方式
                            </li>
                            <li
                                onClick={() => {
                                    LeoModal.show({
                                        title: '配送服务',
                                        children: (
                                            <>
                                                <p>
                                                    一旦订单确认，除非您选择到提供“线上购买，专卖店取货”服务的专卖店取货，否则您订购的产品将由我们的合作快递服务公司递送到您下单时提供给我们的地址。如果因为您向我们提供的地址不正确或不完整导致我们无法及时递送您的订单，我们不承担因此产生的任何责任。请注意，我们的递送仅限于中国大陆地区（不包括香港特别行政区、澳门特别行政区和台湾地区）。产品可以递送的地区还取决于我们合作的快递服务公司是否有能力送达。
                                                </p>
                                                <p>
                                                    如果所提供的地址无人能够接收递送产品，您需联系我们的顾客服务中心，以便安排其他递送日期递送产品。如果自我们通知您产品已发运之日（含该日）起三十（30）天内无法联系到您，订单将取消，未递送的产品的购买金额将自动按照您购买产品的付款方式原路径退回。
                                                </p>
                                                <p>
                                                    在接收产品时，您可能会被要求出示通知您产品已发货的短信或电子邮件。
                                                </p>
                                                <p>
                                                    在订单产品作为礼品的情况下，您可以安排产品递送到您选择的第三方，但前提是递送地址满足上文中规定的要求。
                                                </p>
                                                <p>
                                                    在您的订单被确认后，我们将尽快递送产品。我们指定的任何交货日期或时间只是我们的最佳估计，我们不因任何合理的或不可避免的递送延迟而对您遭受的任何损失或损害承担责任。
                                                </p>
                                                <p>请注意，所有包含将递送给您的产品的包裹将在发运前由我们称重。</p>
                                                <p>
                                                    一旦我们将产品递送到您提供给我们的地址时，或者如您选择“线上购买，专卖店取货”服务，专卖店将产品交付给取货人时，产品的所有权和产品损坏的风险将转移给您。
                                                </p>
                                                <p>
                                                    若签收时发现包裹破损，您有权拒收产品并请联系顾客服务中心。在产品损坏的情况下，请联系顾客服务中心。对于“线上购买，专卖店取货”的产品，请在提取产品时检查是否有任何损坏，如有损坏，请立即告知专卖店员工。
                                                </p>
                                            </>
                                        )
                                    })
                                }}>
                                <ShoppingOutlined style={{ marginRight: '20px' }} />
                                配送服务
                            </li>
                            <li
                                onClick={() => {
                                    LeoModal.show({
                                        title: 'L&G Care',
                                        children: (
                                            <>
                                                <p>
                                                    如果您对从 www.louisvuitton.cn
                                                    上所购买的路易威登产品不满意，根据《路易威登中国网络销售条款》，您可以自收到产品之日起七日内退货（个性化订制产品，拆封后易影响人生安全或者生命健康的产品，以及其他根据产品性质不宜退货的产品除外）；或者在产品交付之日起的
                                                    30 日内调换等值的其他产品（个性化订制产品、腕表和珠宝除外）。
                                                </p>
                                                <p>
                                                    退回及调换的产品必须处于完全可销售状态，并附上相关销售单单据，所有相关配件、说明书、标签、原始包装（例如包装盒，棉布袋等）、赠品（如有）、纸质发票（如有）；香水产品必须以原包装退货，特别是覆盖香水盒的透明塑封膜必须仍然密封；如退回腕表和珠宝，相应的证书(例如
                                                    COSC 或 GIA 证书)也请一并退回。
                                                </p>
                                                <p>
                                                    路易威登将会对寄回退货的商品进行检查，以确保其完好无损且符合条件，相关条件详情请参阅《路易威登中国网络销售条款》。任何未通过检查的商品将退还给您，您将不会获得商品退款。
                                                </p>
                                                <p>
                                                    您可以通过顾客服务中心或路易威登专卖店调换产品；如需退货，请联系顾客服务中心。通过顾客服务中心退换货时，我们建议您通过下面的方式进行：
                                                </p>
                                                <p>
                                                    1 – 致电 400-6588-555
                                                    <br />
                                                    路易威登提供免费的上门取件服务。如您的退换货得到确认，您将收到确认短信和邮件。
                                                </p>
                                                <p>
                                                    2 – 准备包裹
                                                    <br />
                                                    请将需要退回或调换的产品，销售单据，所有相关配件、说明书、标签、原始包装、赠品（如有）以及纸质发票（如有）一起放入原始的快递盒中，并将快递盒密封。
                                                </p>
                                                <p>3 – 请将包裹交付于快递员</p>
                                            </>
                                        )
                                    })
                                }}>
                                <TrademarkCircleOutlined style={{ marginRight: '20px' }} />
                                L&G Care
                            </li>
                            <li
                                onClick={() => {
                                    LeoModal.show({
                                        title: '线下取货',
                                        children: (
                                            <>
                                                <p>
                                                    如果您选择以“线上购买，专卖店取货”的方式提取您订购的产品，当您订购的产品已在您选择的专卖店可被提取后，您将收到电子邮件或短信（如果您已经为此目的提供了您的手机号码）通知。自我们通知您可以提货的日期（含通知之日）起您订购的产品将在店内保存三十（30）天。在此期间您必须在专卖店正常营业时间内提取您订购的产品。如果您未在此期间提取订购产品，订单将被取消，未提取产品的购买金额将自动按照您购买产品的付款方式原路径退回。
                                                </p>
                                                <p>
                                                    当您使用“线上购买，专卖店取货”服务时，为了确保您订购的产品是由您本人亲自提取的，我们将要求您出示通知您可以在专卖店提货的电子邮件或短信。如果由他人代领，请事先联系顾客服务中心，我们保留接受或者拒绝他人代领的方式。如果您不愿意遵守上述流程，则无法提取产品。如果无法以我们合理满意的方式确认前来提取产品的人员的身份，我们保留拒绝交付“线上购买，专卖店取货”产品的权利。在法律允许的最大范围内，并受制于《路易威登中国网络销售条款》第
                                                    7
                                                    条的规定，您同意我们有权按照本条规定交付产品以完成我们为您提供产品的义务，在我们按照本条规定交付了“线上购买，专卖店取货”产品后，我们不再对订单负责。
                                                </p>
                                            </>
                                        )
                                    })
                                }}>
                                <HomeOutlined style={{ marginRight: '20px' }} />
                                线下取货
                            </li>
                            <li
                                onClick={() => {
                                    LeoModal.show({
                                        title: '客户服务',
                                        children: (
                                            <>
                                                <p>
                                                    电话/微信：
                                                    <br />
                                                    400 6588 555
                                                </p>
                                                <p>
                                                    工作时间：
                                                    <br />
                                                    每天: 10:00 - 20:00
                                                </p>
                                            </>
                                        )
                                    })
                                }}>
                                <MessageOutlined style={{ marginRight: '20px' }} />
                                客户服务
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </NavbarLayout>
    )
}
